<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="image" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="width:100px;height:100px;" alt />
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="创建时间"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="showbtnedit" @click="getedit(scope.row)">编辑</el-button>
          <el-button type="text" v-if="showbtndel" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑轮播图" :visible.sync="editBannerpopup" width="50%">
      <el-form
        ref="editformInfo"
        :model="editformInfo"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="editformInfo.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editformInfo.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="https://m.sapiki.com//admin/common/imageUpload"
            :show-file-list="false"
            :on-success="edithandleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="upimageUrl" :src="upimageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        <div style="font-size: 12px;color: #6D6D6D;">尺寸宽750*高560</div>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="editBannerpopup=false">关闭</el-button>
          <el-button type="primary" @click="editsubmitForm('editformInfo')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- <div class="fenyecont">
        <el-pagination
            background
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="totle"
            @current-change="fenyeBtn"
          />
    </div>-->
  </div>
</template>
<script>
import { banner, lists, bannerEdit, bannerDelete } from "@/api/user";
import Base64 from "@/utils/base";
import { getp_id } from "@/utils/getmenuid";
export default {
  data() {
    return {
      tableData: "",
      guideDialog: false,
      showbtnedit: false,
      showbtndel: false,
      formInfo: "",
      totle: "",
      page: 1,
      btnarr: "",
      upimageUrl: "",
      editformInfo: {
          title: [
          { required: true, message: "请输入标题", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入排序", trigger: "change" }
        ],
        avatar:[
          { required: true, message: "请选择图片", trigger: "change" }
        ]
      },
      editBannerpopup: false
    };
  },
  created() {
    this.getlists();
    setTimeout(() => {
      this.getbannerlist();
    }, 500);
  },
  methods: {
    editsubmitForm(formName) {
      // console.log(this.editformInfo,"123")
      if(this.editformInfo.title==""){
           this.$message({
            message:'请输入标题',
            type:'warning'
          })
          return
      }
       if(this.editformInfo.sort==""){
           this.$message({
            message:'请输入排序',
            type:'warning'
          })
          return
      }
         if(this.upimageUrl==""){
           this.$message({
            message:'请选择图片',
            type:'warning'
          })
          return
      }
            this.$refs[formName].validate(valid => {
        if (valid) {
  let parmes = {
        id: this.editformInfo.id,
        title: this.editformInfo.title,
        img: this.upimageUrl,
        sort: this.editformInfo.sort
      };
      bannerEdit({
        request_data: Base64.encode(JSON.stringify(parmes))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.editBannerpopup = false;
        this.getbannerlist();
      })
        }else{

        }
    
      })
    },
    getlists() {
      lists({
        request_data: Base64.encode(JSON.stringify({ pid: getp_id() }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        let btnarr = [];
        res.result.map(v => {
          btnarr.push(v.class_mark);
        });
        btnarr.forEach(item => {
          if (item == "system_9") {
            this.showbtnedit = true;
          }
          if (item == "system_11") {
            this.showbtndel = true;
          }
        })
      })
    },
    //分页
    // fenyeBtn(e) {
    //   console.log(e)
    //   this.page = e
    //   this.fetchData(this.page)
    // },
    // handleSizeChange(e){
    //   console.log(e)
    // },
    // fetchData(val){
    //   banner(
    //   ).then(res => {
    //     console.log(res.result.data);
    //     this.tableData = res.result.data;
    //     this.totle = res.result.count
    //   });
    // },
    getbannerlist() {
      banner().then(res => {
        this.tableData = res.result.data;
        this.totle = res.result.count;
      });
    },
    edithandleAvatarSuccess(res, file) {
      this.upimageUrl = res.file_path;
    },
    //修改
    getedit(row) {
      this.editformInfo = row;
      this.upimageUrl = row.image;
      this.editBannerpopup = true;
    },
    //帮助管理列表 -- 删除
    del(row) {
      this.$confirm("确定删除此条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          bannerDelete({
            request_data: Base64.encode(JSON.stringify({ id: row.id }))
          }).then(res => {
            if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.getbannerlist();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    submitForm() {
      let parmes = {
        id: this.formInfo.id,
        title: this.formInfo.title,
        content: this.formInfo.content,
        sort: this.formInfo.sort
      };
      helpEdit(
        {
          request_data: Base64.encode(JSON.stringify(parmes))
        },
      ).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.guideDialog = false;
        this.gethelp();
      });
    }
  }
};
</script>
<style scoped>
.el-table td,
.el-table th {
  padding-left: 20px;
}
/* .fenyecont{
  text-align: center;
  margin-top: 20px;
} */
.system_5 {
  display: none;
}
.system_4 {
  display: none;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
